<template>
  <Row type="flex" justify="center" align="bottom">
    <!-- <i-col :span="1"></i-col> -->
    <i-col :span="4" style="height:64px;line-height:64px;">
      <div class="img-logo-henan">
        <img
          src="../../assets/henan_logo2.png"
          height="44px"
          style="vertical-align: middle;"
        />
        <span class="layout-logo-title">
          河南高速公路联网公司
        </span>
        <!-- <div>
        <img src="../../assets/henan_logo.png" height="40px" style="margin-left:5px">
        <span class="layout-logo-title" style="border:1px solid red">
          河南省高速公路联网监控收费通信
        </span>
        <span class="layout-logo-title" style="border:1px solid red">服务有限公司</span>
      </div>  -->
      </div>
    </i-col>
    <i-col :span="4" style="height:64px;line-height:64px;">
      <div class="img-logo-swjtu">
        <img src="../../assets/swjtu_logo3.png" height="58px" />
      </div>
      <!-- <div>
        <img src="../../assets/swjtu_logo.png" height="30px">
        <span class="layout-logo-title">
          西南交通大学
        </span>
      </div> -->
    </i-col>

    <i-col :span="8" style="height:64px;line-height:64px;">
      <div class="layout-title">
        河南省高速公路路网运行状态智能监控系统
      </div>
    </i-col>
    <i-col :span="8">
      <Menu mode="horizontal" :active-name="$route.name">
        <div class="layout-nav">
          <MenuItem name="home" to="/">
            <Icon type="md-home" />
            主页
          </MenuItem>
          <MenuItem name="monitor" to="/monitor">
            <Icon type="md-videocam" />
            实时监控
          </MenuItem>
          <MenuItem name="events" to="/events">
            <Icon type="md-alert" />
            历史查询
          </MenuItem>
          <!-- <Submenu name="analysis-submenu" class="analysis-submenu">
            <template slot="title">
              <Icon type="md-stats" />
              数据统计
            </template>
            <MenuItem
              name="sub-company-analysis"
              to="/sub-company-analysis/xian/today"
              class="analysis-submenu-item"
              >分公司智能分析</MenuItem
            > -->
          <MenuItem
            name="station"
            to="/station-analysis/station/道路1/today"
            class="analysis-submenu-item"
          >
            <Icon type="md-stats" />
            数据统计
          </MenuItem>
          <!-- </Submenu> -->
        </div>
      </Menu>
    </i-col>
  </Row>
</template>

<script>
export default {
  components: {}
};
</script>

<style lang="less">
.ivu-menu-horizontal {
  height: 0rem !important;
  line-height: 3rem !important;
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0rem !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active {
  color: #fff !important;
  background-color: #1081b3;
}
.ivu-layout-header {
  background-color: #01237c !important;
  //background-color: rgb(12,55,131) !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  // position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: #4bdaff;
  border-radius: 0.3rem;
  // float: left;
  // position: relative;
  // top: 1.5rem;
  border-bottom: 0.3rem solid #4bdaff;
  // left: 0px;
}
.layout-logo-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 2.3rem;
  font-weight: bold;
  text-align: center;
  color: rgb(239, 242, 245);
  text-align: left;
  font-family: STKaiti;
  //position:relative
}
.ivu-menu-item,
.ivu-menu-submenu {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.4rem !important;
}
.analysis-submenu .analysis-submenu-item.ivu-menu-item-active,
.analysis-submenu-item:hover {
  background: none !important;
  color: #4bdaff !important;
}
.layout-nav {
  // width: 82rem;
  height: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
  // float: right;
}
.img-logo-henan {
  //margin-right:10px;
  opacity: 0.85;
  margin-top: 3px;
  margin-left: 20px;
}
.img-logo-swjtu {
  //vertical-align: bottom;
  //margin-right:10px;
  opacity: 0.85;
  margin-top: 13px;
  margin-left: 30px;
}
</style>
